<script setup>
import { largePay } from "@/api/system/dashboards";
import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";
const scrollContainer = ref(null);
let intervalId = null;
let tableData = ref([]);

const getLargePay = async () => {
  const res = await largePay();
  tableData.value = res.data;
  tableData.value.forEach((item) => {
    switch (item.paymentOrderFlag) {
      case 1:
        item.paymentOrderName = "咨询协作";
        break;
      case 2:
        item.paymentOrderName = "业务招待";
        break;
      case 2:
        item.paymentOrderName = "通讯费";
        break;
      case 4:
        item.paymentOrderName = "市内交通";
        break;
      case 5:
        item.paymentOrderName = "差旅";
        break;
      case 6:
        item.paymentOrderName = "会议费";
        break;
      case 7:
        item.paymentOrderName = "固定资产采购";
        break;
      case 8:
        item.paymentOrderName = "房屋租赁";
        break;
      case 9:
        item.paymentOrderName = "通用付款";
        break;
      case 10:
        item.paymentOrderName = "专家费";
        break;
      case 11:
        item.paymentOrderName = "劳务费";
        break;
      case 12:
        item.paymentOrderName = "非员工交通住宿费";
        break;
    }
  });
};
const scroll = () => {
  const container = scrollContainer.value;
  container.scrollTop += 1;
  if (container.scrollHeight - container.scrollTop === container.clientHeight) {
    const newData = tableData.value.map((item) => ({
      ...item,
      id: item.id + tableData.value.length,
    }));
    tableData.value = [...tableData.value, ...newData];
    container.scrollTop = container.scrollTop - container.clientHeight;
  }
};

onMounted(() => {
  intervalId = setInterval(scroll, 100); // 每50毫秒滚动一次
  getLargePay();
});

onUnmounted(() => {
  clearInterval(intervalId); // 清除定时器
});
</script>

<template>
  <VCard class="myBox">
    <VCardText>
      <div class="Box">
        <VCardTitle>
          <div class="tableTitle">
            <p><span class="Titshu">&nbsp;</span>&nbsp;&nbsp;大额支出流程</p>
            <section>当前数据为本年数据汇总</section>
          </div>
        </VCardTitle>
        <li class="typOne">
          <span>费用类型</span>
          <span>流水号</span>
          <span>经办人</span>
          <span>经办部门</span>
          <span>付款金额</span>
          <span>支付方式</span>
          <span>流程状态</span>
          <span>时间</span>
          <span
            >凭证号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            >></span
          >
        </li>
        <div class="scroll-container" ref="scrollContainer">
          <ul>
            <li v-for="item in tableData" :key="item.id">
              <span>{{ item.paymentOrderName }}</span>
              <span>{{ item.serialNumber }}</span>
              <span>{{ item.agent }}</span>
              <span>{{ item.agentDept }}</span>
              <span>{{ item.paymentAmount }}</span>
              <span>{{ item.paymentMethod }}</span>
              <span>{{ item.state === 1 ? "已结束" : "未结束" }}</span>
              <span>{{ item.endTime }}</span>
              <span>{{ item.voucherNumber }}</span>
            </li>
          </ul>
        </div>
      </div>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped>
.myBox {
  inline-size: 100%;
}

.tableTitle {
  display: flex;
  justify-content: space-between;

  > p {
    font-weight: 900;
    font-size: 20px;
    color: #000;
  }

  > section {
    font-size: 12px;
    color: #ccc;
  }
}

li {
  display: flex;
  align-items: center;
  block-size: 30px;
  font-size: 12px;

  > span {
    display: inline-block;
    overflow: hidden;
    inline-size: 10%;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  > span:nth-last-child(1) {
    inline-size: 20%;
  }
}

.typOne {
  font-weight: 700;
  color: #000;
}

.scroll-container li {
  block-size: 25px;
  line-height: 25px;
}

ul li:nth-child(odd) {
  background-color: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
}

ul li:hover {
  background-color: #e6f7ff;
}

.scroll-container {
  overflow: hidden;
  block-size: 260px;
}

.scroll-container ul {
  padding: 0;
  margin: 0;
  block-size: auto;
  list-style: none;
}

.Titshu {
  display: inline-block;
  background-color: blue;
  block-size: 28px;
  inline-size: 8px;
}
</style>
